<template>
  <!-- 友情链接 -->
  <div class="container">
    <div class="row">
      <div
        class="col-md-2 bg-site text-white d-flex align-items-center justify-content-center"
      >
        友情链接
      </div>
      <div class="col-md-10 bg-light d-flex align-items-center">
        <ul class="nav nav-pills flex-column flex-md-row">
          <li class="nav-item">
            <a class="nav-link" href="https://www.whut.edu.cn/">武汉理工大学</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://kfy.whut.edu.cn/"
              >武汉理工大学科学技术发展院</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://phymech.whut.edu.cn/"
              >武汉理工大学物理与力学学院</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.nsfc.gov.cn/"
              >国家自然科学基金委员会</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
  <footer class="container-fluid">
    <div class="row bottom-bar">
      <div class="col-12 col-md-6">
        <p>新材料力学理论与应用湖北省重点实验室</p>
        <p>电话：027-87651820 &nbsp;邮箱：yanshl@whut.edu.cn</p>
        <p>地址：武汉市洪山区雄楚大道武汉理工大学南湖校区力学楼422室</p>
      </div>

      <div class="col-12 col-md-6">
        <div>
          Copyright © 2025 :
          <a class="text-light" href="http://kfy.whut.edu.cn/"
            >武汉理工大学科学技术发展院</a
          >
        </div>
        <div>
          Copyright © 2025 :
          <a class="text-light" href="http://phymech.whut.edu.cn/"
            >武汉理工大学物理与力学学院</a
          >
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "FooterComponent",
};
</script>
<style scoped>
@import url("@/assets/css/common.css");
/* 自定义样式 */
.bottom-bar {
  background-color: var(--site-color);
  color: #fff;
  padding: 10px 0;
  text-align: center; /* 文本居中 */
}
.bottom-bar .col {
  margin-bottom: 15px; /* 列之间的间距，只在移动端有效 */
}
.bottom-bar .col:last-child {
  margin-bottom: 0; /* 最后一列不需要间距 */
}
@media (min-width: 768px) {
  .bottom-bar .col {
    margin-bottom: 0; /* 在平板和PC端移除间距 */
  }
}

.bottom-bar h5,
.bottom-bar p {
  margin: 0; /* 移除标题和段落的默认边距 */
}
/* 友情链接 */
.bg-site {
  background-color: rgba(26, 2, 126, 0.7);
}

.text-white {
  color: white;
}

.nav-pills .nav-link {
  padding: 0.5rem 1rem;
  color: rgb(94, 92, 92);
  border-right: 1px solid black; /* 添加分隔线 */
}
.nav-link:hover {
  color: var(--site-color);
}
.nav-pills .nav-link:last-child {
  border-right: none; /* 移除最后一个链接的分隔线 */
}

.nav-pills .nav-link::after {
  content: "|";
  margin-left: 1rem;
}

.nav-pills .nav-link:last-child::after {
  content: ""; /* 移除最后一个链接后的分隔线 */
}
</style>